<!-- -->
<template>
  <div id='member'>
    <div class="ebtop">
      <div class="left">个人直推列表</div>
    </div>
     <!-- 搜索匹配 -->
    <div class="search">
        <!-- 搜索框匹配 -->
        <div class="box1">
            <div class="inp">
              <span>查询会员&emsp;</span>
              <input type="text" placeholder="输入你想要查询的用户名" v-model="souname" maxlength='16'>
            </div>
        </div>
        <div class="box3" @click="sousuo()"><i class="iconfont icon-sousuo"></i></div>
        <div class="warning">&nbsp;用户  <span>“{{user.user_name}}”  </span>：左<span>  {{user.left}}  </span>人，右<span>  {{user.right}} </span>人,直推会员<span>  {{user.count}}  </span>名</div>
    </div>
    <div class="tablemes">
      <div class="table1 tablelist1">
        <p class="info topitem" :class="{topitem1:user.user_rank==='500',topitem2:user.user_rank==='1000',topitem3:user.user_rank==='3000',topitem4:user.user_rank==='5000',topitem5:user.user_rank==='10000'}">{{user.user_name}}</p>
        <p class="info">{{user.ebuc_money}}</p>
        <p class="info">{{user.reg_time}}</p>
        <p class="info">{{active[user.status-1]}}</p>
        <p class="info">左区业绩：{{user.zuoqu}}</p>
        <p class="info">右区业绩：{{user.youqu}}</p>
        <p class="info btoitem"><span v-if="user.left=='1'">{{user.left}}</span><span v-if="user.left=='0'"  class="active" @click="registerl(user.id)">注册</span>
        <span v-if="user.right=='1'">{{user.right}}</span><span v-if="user.right=='0'" class="active" @click="registerr(user.id)">注册</span></p>
      </div>
      <div class="line"></div>
      <div class="table1 tablelist2" v-if="this.left">
        <p class="info topitem" @click="moreperson(left.id)" :class="{topitem1:left.user_rank==='500',topitem2:left.user_rank==='1000',topitem3:left.user_rank==='3000',topitem4:left.user_rank==='5000',topitem5:left.user_rank==='10000'}">{{left.user_name}}</p>
        <p class="info">{{left.ebuc_money}}</p>
        <p class="info">{{left.reg_time}}</p>
        <p class="info">{{active[left.status-1]}}</p>
        <p class="info">业绩：{{left.yeji}}</p>
        <p class="info btoitem"><span v-if="left.left=='1'">{{left.left}}</span><span v-if="left.left=='0'"  class="active" @click="registerl(left.id)">注册</span>
        <span v-if="left.right=='1'">{{left.right}}</span><span v-if="left.right=='0'"  class="active" @click="registerr(left.id)">注册</span></p>
      </div>
      <div class="table1 tablelist3" v-if="this.right">
        <p class="info topitem" @click="moreperson(right.id)" :class="{topitem1:right.user_rank==='500',topitem2:right.user_rank==='1000',topitem3:right.user_rank==='3000',topitem4:right.user_rank==='5000',topitem5:right.user_rank==='10000'}">{{right.user_name}}</p>
        <p class="info">{{right.ebuc_money}}</p>
        <p class="info">{{right.reg_time}}</p>
        <p class="info">{{active[right.status-1]}}</p>
        <p class="info">业绩：{{right.yeji}}</p>
        <p class="info btoitem"><span v-if="right.left=='1'">{{right.left}}</span><span v-if="right.left=='0'"  class="active" @click="registerl(right.id)">注册</span>
        <span v-if="right.right=='1'">{{right.right}}</span><span v-if="right.right=='0'"  class="active" @click="registerr(right.id)">注册</span></p>
      </div>
    </div> 
  </div>
</template>

<script>
export default {
  name: "member",
  data() {
    return {
      souname: "",
      name: "",
      active: ["未激活", "已激活"],
      user: {},
      left: {},
      right: {},
      uid: this.$store.state.usermes.uid //获取id
    };
  },
  created() {
    var arr = sessionStorage.getItem("usermes");
    var array = JSON.parse(arr);
    this.uid = array.usermes.uid;
    console.log(this.uid);
    this.loadmes();
  },
  methods: {
    loadmes() {
      this.axios
        .post("User/user_team")
        .then(({ data }) => {
          console.log(data);
          this.user = data.user;
          this.left = data.left;
          this.right = data.right;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    registerl(id) {
      this.$router.push({ name: "register", query: { id: id, lay: 1 } });
    },
    registerr(id) {
      this.$router.push({ name: "register", query: { id: id, lay: 2 } });
    },
    moreperson(id) {
      console.log(id);
      this.axios
        .post("User/user_team", {
          uid: id
        })
        .then(({ data }) => {
          console.log(data);
          this.user = data.user;
          this.left = data.left;
          this.right = data.right;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    // 搜索
    sousuo() {
      if (!this.souname) {
        this.$message({ message: "请输入用户名", type: "error" });
      } else {
        this.axios
        .post("User/user_team", {
          name: this.souname
        })
        .then(({ data }) => {
          console.log(data);
          if (data.status) {
            this.$message({ message: "没有该用户", type: "error" });
          } else {
            this.$message({ message: "搜索到以下信息", type: "success" });
            this.user = data.user;
            this.left = data.left;
            this.right = data.right;
          }  
        })
        .catch(function(error) {
          console.log(error);
        });
      } 
    }
  }
};
</script>

<style lang='scss' scoped>
#member {
  .ebtop {
    width: 100%;
    height: 55px;
    padding: 0 83px 0 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(153, 153, 153, 1);
    .left {
      font-size: 13px;
      font-family: MicrosoftYaHei-Bold;
      color: rgba(0, 0, 0, 1);
      font-weight: 700;
      line-height: 65px;
    }
  }
  .search {
    margin-top: 15px;
    margin-left: 15px;
    display: flex;
    justify-content: flex-start;
    .box1 {
      margin-right: 15px;
      input {
        width: 233px;
        height: 33px;
        padding-left: 5px;
        border-radius: 2px;
        border: 1px solid #dcdfe6;
      }
    }
    .box3 {
      cursor: pointer;
      width: 50px;
      height: 28px;
      margin-top: 3px;
      background: rgba(224, 3, 0, 1);
      border-radius: 3px;
      text-align: center;
      .icon-sousuo {
        line-height: 30px;
        color: #fff;
      }
    }
    .warning {
      display: inline-block;
      height: 30px;
      margin-left: 35px;
      padding: 0 5px;
      background: rgba(255, 247, 247, 1);
      border-radius: 4px;
      border: 1px solid rgba(224, 3, 0, 1);
      // margin-left: 50px;
      text-align: center;
      font-family: MicrosoftYaHei;
      color: rgba(0, 0, 0, 1);
      line-height: 30px;
      span {
        color: #ffa900;
      }
    }
  }
  .tablemes {
    width: 775px;
    height: 480px;
    margin: 30px auto;
    //  background-color: rgb(241, 166, 166);
    position: relative;
    text-align: center;
    .tablelist1 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .tablelist2 {
      cursor: pointer;
      position: absolute;
      bottom: -40px;
      left: 0;
    }
    .tablelist3 {
      cursor: pointer;
      position: absolute;
      bottom: -40px;
      right: 0%;
    }
    .table1 {
      width: 200px;
      font-size: 13px;
      font-family: MicrosoftYaHei;
      color: rgba(102, 102, 102, 1);
      border: 1px solid rgba(29, 98, 255, 1);
      line-height: 25px;
      .info {
        // height:35px;
        width: 180px;
        margin: 0 auto;
        border-radius: 2px;
        line-height: 30px;
        color: rgba(102, 102, 102, 1);
        border-top: 1px solid rgba(29, 98, 255, 1);
      }
      .topitem {
        width: 200px;
        line-height: 35px;
        font-weight: 700;
        color: black;
        background: red;
        border: none;
      }
      .topitem1 {
        background: orange;
      }
      .topitem2 {
        background: yellow;
      }
      .topitem3 {
        background: green;
      }
      .topitem4 {
        background: blue;
      }
      .topitem5 {
        background: purple;
      }
      .info:nth-of-type(2) {
        border: none;
      }
      .btoitem {
        display: block;
        height: 30px;
        line-height: 25px;
        padding-top: 5px;
        span {
          display: inline-block;
          width: 42%;
          height: 80%;
        }
        .active {
          background: rgba(29, 98, 255, 1);
          cursor: pointer;
          border: 1px solid rgba(102, 102, 102, 1);
          color: #fff;
          box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
        }
        span:nth-of-type(1) {
          border-right: 1px solid rgba(29, 98, 255, 1);
        }
      }
    }
  }
  .line {
    width: 575px;
    height: 60px;
    border: 1px solid rgba(29, 98, 255, 1);
    border-bottom: none;
    position: absolute;
    bottom: 155px;
    left: 100px;
    &::before {
      content: "";
      height: 39px;
      width: 1px;
      background: rgba(29, 98, 255, 1);
      position: absolute;
      bottom: 60px;
      left: 286px;
    }
  }
}
</style>